<template>
	<view>
		<view class="alldiv">
			<view class="headdiv">
				<cover-image class="back" @click="returns" src="@/static/image/arrow-left.png"></cover-image>
			</view>

			<view class="bodydiv">
				<!-- 订单信息 -->
				<view class="order-info">
					<view class="title">
						{{ language.Takingataxi.havePaid }}
						{{ orderInfo.cost }}
						{{ language.Takingataxi.currencyText }}
					</view>
					<view class="car-info">
						<text>出租车</text>
						<text class="line">|</text>
						<text>{{ driverInfo.name }}师傅</text>
						<text class="line">|</text>
						<text>{{ driverInfo.licensePlateNum }}</text>
					</view>
				</view>

				<!-- 详情 -->
				<view class="details">
					<view class="title">{{ language.Takingataxi.details }}</view>
					<view class="journeyInfo">
						<view class="distance-travelled">
							全程{{ orderInfo.distance }}公里
							<!-- ，13分钟 -->
						</view>
						<view class="address-box">
							<view class="date">
								<u-icon style="marginRight: 16rpx;" name="clock-fill" size="12"></u-icon>
								{{ orderInfo.startTime }}
							</view>
							<view class="origin-station">
								{{ orderInfo.startPlace }}
							</view>
							<view class="destination">
								{{ orderInfo.endPlace }}
							</view>
						</view>
						<view class="cost-box">
							<view class="name">
								{{ language.Takingataxi.travelCost }}
							</view>
							<view class="cost">
								{{ orderInfo.cost }}
								{{ language.Takingataxi.currencyText }}
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import * as driverApi from '@/api/driver.js'
	export default {
		data() {
			return {
				language: {},
				latitude: 39.909,
				longitude: 116.39742,
				profilePhoto: require('@/static/image/BankCard.png'),
				otherUseList: [{
						id: 0,
						icon: require('@/static/image/seek-help.png'),
						name: '紧急求助',
					},
					{
						id: 1,
						icon: require('@/static/image/path.png'),
						name: '路线选择',
					},
					{
						id: 2,
						icon: require('@/static/image/share.png'),
						name: '行程分享',
					},
					{
						id: 3,
						icon: require('@/static/image/cancel.png'),
						name: '取消订单',
					}
				],
				orderId: '',
				driverInfo: {},
				orderInfo: {},
			}
		},
		onShow: function() {
			this.getlanguagedata();
		},
		onLoad(option) {
			if (!option.id) {
				this.navigateBack()
			}
			this.orderId = option.id
			this.initData(option)
		},
		mounted() {

		},
		methods: {
			async initData({
				id
			}) {
				try {
					uni.showLoading({
						title: 'loading...'
					});
					const res1 = await driverApi.getTaxiOrder({
						id
					});
					if (res1.code === 0) {
						this.orderInfo = res1.data;
						const startLatLng = {
							lat: parseFloat(this.orderInfo.startLatitude),
							lng: parseFloat(this.orderInfo.startLongitude)
						};
						const endLatLng = {
							lat: parseFloat(this.orderInfo.endLatitude),
							lng: parseFloat(this.orderInfo.endLongitude)
						};
						const res2 = await driverApi.getDriverInfo({
							id: this.orderInfo.driverId
						});
						if (res2.code === 0) {
							this.driverInfo = res2.data;
						} else {
							console.log('getDriverInfo failed:', res2);
						}
						uni.hideLoading();
					} else {
						console.log('getTaxiOrder failed:', res1);
					}
					uni.hideLoading();
				} catch (e) {
					console.log(e);
					uni.hideLoading();
				}
			},
			getlanguagedata() {
				this.language =
					this.$store.getters["internationalization/getinternationalization"];
			},
			returns() {
				uni.switchTab({
					url: "/pages/Home/Home",
				});
			}
		}
	}
</script>

<style lang="less" scoped>
	.alldiv {
		width: 100%;
		height: 100vh;

		.headdiv {
			position: relative;
			width: 100%;
			height: 830rpx;
			overflow: hidden;

			.back {
				position: absolute;
				left: -40rpx;
				top: 100rpx;
				width: 160rpx;
				height: 120rpx;
				transform: scale(0.5)
			}
		}

		.bodydiv {
			// margin-top: -20rpx;
			padding: 48rpx 32rpx;
			width: 100%;
			height: calc(100vh - 810rpx);
			border-radius: 20px 20px 0 0;
			background: rgba(255, 255, 255, 1);
			box-shadow: 0px -3px 6px rgba(6, 145, 161, 0.05);
			overflow-y: auto;

			// 订单信息
			.order-info {
				display: flex;
				justify-content: space-between;
				align-items: center;

				.title {
					font-size: 32rpx;
					font-weight: bold;
					line-height: 44rpx;
					color: rgba(56, 56, 56, 1);
				}

				.car-info {
					display: flex;
					font-size: 24rpx;
					line-height: 32rpx;
					color: rgba(102, 102, 102, 1);

					.line {
						margin: 0 4rpx;
					}
				}
			}

			// 详情
			.details {
				margin-top: 24rpx;

				.title {
					font-size: 24rpx;
					line-height: 32rpx;
					color: rgba(102, 102, 102, 1);
				}

				.journeyInfo {
					margin-top: 16rpx;
					padding: 24rpx;
					border-radius: 32rpx;
					background: rgb(250, 251, 253);

					.distance-travelled {
						font-size: 24rpx;
						line-height: 32rpx;
						color: rgba(56, 56, 56, 1);
					}

					// 地址信息
					.address-box {
						margin-top: 12rpx;
						font-size: 24rpx;
						line-height: 32rpx;
						color: rgba(102, 102, 102, 1);

						.date {
							display: flex;
							align-items: center;
						}

						.origin-station {
							position: relative;
							display: flex;
							align-items: center;
							margin: 12rpx 0;

							&::before {
								content: '';
								display: block;
								margin: 0 20rpx 0 6rpx;
								width: 6px;
								height: 6px;
								border-radius: 50%;
								background: rgb(47, 212, 184);
							}

							&::after {
								position: absolute;
								left: 10rpx;
								top: 28rpx;
								content: '';
								display: block;
								height: 20rpx;
								width: 2rpx;
								background: rgb(217, 219, 218);
								;
							}
						}

						.destination {
							display: flex;
							align-items: center;

							&::before {
								content: '';
								display: block;
								margin: 0 20rpx 0 3px;
								width: 6px;
								height: 6px;
								border-radius: 50%;
								background: rgb(255, 141, 26)
							}
						}
					}

					.cost-box {
						margin-top: 16rpx;
						display: flex;
						align-items: center;
						justify-content: space-between;

						.name {
							font-size: 24rpx;
							line-height: 32rpx;
							color: rgba(153, 153, 153, 1);
						}

						.cost {
							font-size: 24rpx;
							line-height: 32rpx;
							color: rgba(56, 56, 56, 1);
						}
					}
				}
			}

		}
	}
</style>